<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<style>
			/*相对定位，box2引一张图片压到box1图片上*/
			div.box1{
				width: 250px;
				height: 250px;
				background: url(img/1.png);
				background-size: 100%;
            /*声明一个相对定位与方向属性*/	
				position: absolute;
				left: 0px;	
				top: 0px;
				/*堆叠 z-index  针对所有的position*/
				z-index: 100;
            }
			div.box2{
				width: 250px;
				height: 250px;
				background: url(img/3.png);
				background-size: 100%;
			/*声明一个相对定位与方向属性*/	
				position: absolute;
				left: 0px;	
				top: 0px;
				z-index: 101;
			}
		</style>
	</head>
	<body>
		<!-- 定位  相对定位  相对与父元素定位
		 功能：单一元素定位，推荐
		 positi属性.relative;声明元素可以用相对定位意义
		 方向属性：left、right、top、bottom
		 z堆叠顺序属性：z-index
		           属性值数值，数值越大，越靠前
         绝对定位，  按照，定位祖先【页面左上角】进行定位
		 功能：脱离文档流，不占据原空间
		 方向属性和叠加属性和相对以及固定定位共用！
		 position属性：absolute;声明文员可以使用绝对定位
		 实际开发中：相对定位结合绝对定位一起使用
		     侧边栏，左栏，遮罩层【挂靠】
			 案例：左栏弹出【html结构，语义化标签+css两种定位+js】
		 -->
		 <div class="box1"></div>
		 <div class="box2"></div>
	</body>
</html>